<template>
    <el-dialog
        :title="cityName + typeName + '---动态更新提醒设置'"
        :visible.sync="boxShow"
        width="50%"
        center
        :destroy-on-close="true"
        class="set-box"
        @close="close"
        @open="open"
    >
        <el-form
            :model="tipForm"
            :rules="rules"
            label-position="top"
            ref="tipForm"
        >
            <el-form-item label="请选择被提醒人,可多选:" prop="reminder">
                <el-button plain class="set-btn" @click="handleSelectPerson">
                    {{ tipForm.reminder ? tipForm.reminder : "请选择" }}
                </el-button>
            </el-form-item>
            <div class="item-box">
                <el-form-item label="请选择提醒周期:" prop="month">
                    <el-select v-model="tipForm.month" placeholder="请选择">
                        <el-option
                            v-for="(item, index) in 12"
                            :key="index"
                            :label="getlabel(item)"
                            :value="item"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请选择当月提醒日期:" prop="day">
                    <el-select v-model="tipForm.day" placeholder="请选择">
                        <el-option
                            v-for="(item, index) in 30"
                            :key="index"
                            :label="'当月' + item + '号'"
                            :value="item"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="item-box">
                <el-form-item label="请选择生效时间:" prop="effectiveDate">
                    <el-date-picker
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        placeholder="选择日期"
                        v-model="tipForm.effectiveDate"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="请选择提醒方式:">
                    <el-checkbox-group v-model="tipForm.remindType">
                        <div>
                            <el-checkbox label="1">电脑消息提醒</el-checkbox>
                            <p>注:电脑消息提醒</p>
                        </div>
                        <div>
                            <el-checkbox label="2">小程序微信推送</el-checkbox>
                            <p>注:小程序微信推送</p>
                        </div>
                        <div>
                            <el-checkbox label="3">短信提醒</el-checkbox>
                            <p>注:本提醒涉及到短信收费</p>
                        </div>
                    </el-checkbox-group>
                </el-form-item>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('tipForm')">清空动态提醒</el-button>
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm('tipForm')"
                >确 定</el-button
            >
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { State } from "vuex-class";
@Component({
    components: {}
})
export default class SetTips extends Vue {
    @Prop({
        type: Boolean,
        required: true,
        default: () => {
            return false;
        }
    })
    show!: any;

    @Prop({
        type: String,
        required: true,
        default: () => {
            return "";
        }
    })
    businessId!: any;

    @Prop({
        type: String,
        required: true,
        default: () => {
            return "";
        }
    })
    businessName!: any;

    @Prop({
        type: String,
        required: true,
        default: () => {
            return "";
        }
    })
    typeName!: any;

    @Prop({
        type: Number,
        required: true,
        default: () => {
            return 1;
        }
    })
    businessType!: any;

    @State(state => state.authArea) authArea: any;
    @State(state => state.user.userInfo) user: any;
    tipForm: any = {
        reminder: "",
        month: "",
        day: "",
        effectiveDate: "",
        remindType: ["1"]
    };

    selectedList: any = [];
    townData: any = [];

    itemId = "";

    rules: any = {
        reminder: [
            { required: true, message: "请选择被提醒人", trigger: "change" }
        ],
        month: [
            { required: true, message: "请选择提醒周期", trigger: "change" }
        ],
        day: [
            { required: true, message: "请选择当月提醒日期", trigger: "change" }
        ],
        effectiveDate: [
            {
                required: true,
                message: "请选择生效时间",
                trigger: "blur"
            }
        ]
    };

    get cityName() {
        return this.$store.getters.getAuthHistory.list[0].areaName || "";
    }

    get boxShow() {
        return this.show;
    }

    set boxShow(val: any) {
        this.$emit("handleClose");
    }

    getlabel(item: any) {
        return `每${item === 1 ? "" : item}月提醒一次`;
    }

    mounted() {
        this.getData();
    }

    async open() {
        const res = await this.$server["timerRule/get"]({
            data: {
                businessId: this.businessId,
                businessType: this.businessType
            }
        });
        if (res.data.code === 200 && res.data.data.businessId) {
            const {
                reminder,
                day,
                effectiveDate,
                month,
                remindType
            } = res.data.data;
            this.itemId = res.data.data.id;
            this.selectedList = reminder.split(",");
            const nameList: any[] = [];
            this.townData.forEach((item: any) => {
                item.forEach((subItem: any) => {
                    this.selectedList.forEach((cur: any) => {
                        if (subItem.id === cur) {
                            nameList.push(subItem.name);
                        }
                    });
                });
            });
            this.tipForm = {
                day,
                effectiveDate,
                month,
                remindType: remindType ? remindType.split(",") : ["1"],
                reminder: nameList.join(",")
            };
        }
    }

    async getData() {
        const res = await this.$server["org/getMember"]({
            data: {
                departmentId: "",
                pageSize: 999,
                currentPage: 1
            },
            loader: false
        });
        if (res.data.code === 200) {
            const arrObj: any = {};
            res.data.data.records
                .filter((item: any) => item.id !== this.user.id)
                .forEach((item: any) => {
                    if (arrObj[item.departmentId]) {
                        arrObj[item.departmentId].push({
                            ...item,
                            governmentName: item.departmentName
                        });
                    } else {
                        arrObj[item.departmentId] = [
                            {
                                ...item,
                                governmentName: item.departmentName
                            }
                        ];
                    }
                });
            const list: any[] = Object.values(arrObj);
            this.townData = list;
        }
    }

    handleSelectPerson() {
        this.$selectPerson({
            title: "人员选择",
            authArea: this.authArea,
            user: this.user,
            selectedList: this.selectedList,
            tabs: [
                {
                    label: "镇成员",
                    name: "town",
                    type: "group"
                }
            ]
        })
            .then((val: any) => {
                this.selectedList = val.list.map((item: any) => item.id);
                const reminder: any[] = val.list.map((item: any) => item.name);
                this.tipForm.reminder = reminder.join(",");
            })
            .catch(() => {
                this.$message.info("取消选择");
            });
    }

    submitForm(formName: any) {
        let data = {};
        if (this.itemId) {
            data = {
                businessId: this.businessId,
                businessName: this.businessName,
                businessType: this.businessType,
                day: this.tipForm.day,
                month: this.tipForm.month,
                remindType: this.tipForm.remindType.join(","),
                reminder: this.selectedList.join(","),
                effectiveDate: this.tipForm.effectiveDate,
                id: this.itemId
            };
        } else {
            data = {
                businessId: this.businessId,
                businessName: this.businessName,
                businessType: this.businessType,
                day: this.tipForm.day,
                month: this.tipForm.month,
                remindType: this.tipForm.remindType.join(","),
                reminder: this.selectedList.join(","),
                effectiveDate: this.tipForm.effectiveDate
            };
        }
        (this.$refs[formName] as any).validate(async(valid: any) => {
            if (valid) {
                const res = await this.$server["timerRule/save"]({
                    data
                });
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.clearForm();
                    this.$emit("handleCallBack");
                } else {
                    this.$message.error(res.data.message);
                }
            } else {
                return false;
            }
        });
    }

    async resetForm() {
        const res = await this.$server["timerRule/delete"]({
            data: {
                id: this.itemId
            }
        });
        if (res.data.code === 200) {
            this.$message.success(res.data.message);
            this.clearForm();
            this.$emit("handleCallBack");
        }
    }

    close() {
        this.clearForm();
        this.$emit("handleClose");
    }

    clearForm() {
        this.itemId = "";
        this.selectedList = [];
        this.tipForm.remind = "";
        this.tipForm.remindType = ["1"];
        (this.$refs.tipForm as any).resetFields();
    }
}
</script>

<style lang="scss" scoped>
.set-box {
    /deep/ {
        .el-dialog__body {
            border: 1px solid #f4f5f6;
            padding: 10px 20px;
            .set-btn {
                width: 100% !important;
                text-align: left;
                span {
                    width: 100% !important;
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                &:hover {
                    color: #606266;
                    background-color: #fff;
                    border-color: #dcdfe6;
                }
            }
            .item-box {
                display: flex;
                justify-content: space-between;
                .el-form-item {
                    width: 48%;
                    .el-select,
                    .el-date-editor {
                        width: 100%;
                    }
                    .el-checkbox-group {
                        display: flex;
                        justify-content: space-between;
                        & > div {
                            display: flex;
                            flex-direction: column;
                            .el-checkbox {
                                line-height: 1;
                            }
                            p {
                                width: 100%;
                                font-size: 12px;
                                color: #999;
                                margin: 0;
                                padding: 0;
                                margin-top: 4px;
                                line-height: 1;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
